<template>
  <div class="app-container">
    <el-divider content-position="left">已开用血申请列表</el-divider>
    <div class="ele-table-tool ele-table-tool-default flex-container">
      <dl>
        <dt class="color-item color-danger" />
        <dd>待审核</dd>
      </dl>
      <dl>
        <dt class="color-item color-success" />
        <dd>审核通过</dd>
      </dl>
      <dl>
        <dt class="color-item color-primary" />
        <dd>已接收</dd>
      </dl>
    </div>
    <el-table border :data="applies" size="mini" style="width: 100%">
      <el-table-column
        align="center"
        label="申请日期"
        prop="GATHER_DATE"
        width="140"
      />
      <el-table-column align="center" label="门诊号" prop="PATIENT_ID" />
      <el-table-column
        align="center"
        label="血型"
        prop="PAT_BLOOD_GROUP"
        width="50"
      />
      <el-table-column
        align="center"
        label="Rh(D)"
        prop="patient.blood_rhd"
        width="72"
      />
      <el-table-column align="center" label="申请单号" prop="APPLY_NUM" />
      <!-- <el-table-column align="center" label="状态" prop="status" /> -->
    </el-table>
    <div class="h24"></div>
    <div class="apply-history">
      <el-divider content-position="left">本院输血史</el-divider>
      <el-table
        border
        :data="bloodTransfusions"
        size="mini"
        style="width: 100%"
      >
        <el-table-column align="center" label="输血日期" prop="created_at" />
        <el-table-column
          align="center"
          el-table-column
          label="血液成分"
          prop="blood_component_id"
        />
        <el-table-column
          align="center"
          label="输血量"
          prop="blood.blood_capacity"
        />
        <el-table-column align="center" label="血型" prop="blood.blood_group" />
        <el-table-column align="center" label="Rh(D)" prop="blood.blood_rhd" />
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      applies: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        tableData: [],
        bloodTransfusions: [],
      }
    },
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .flex-container {
    dl {
      display: flex;
      align-items: center;
      margin-right: 12px;
      margin-left: 0;
      dt {
        border-radius: 50%;
        &.color-danger {
          background: #f56c6c;
        }
        &.color-success {
          background: #13ce66;
        }
        &.color-primary {
          background: #1890ff;
        }
      }
      dd {
        margin-inline-start: 8px;
      }
    }
  }
</style>
